<template>
    <div class="nav-tab" :style="{top:`${clientRect.allHeight}px`}">
        <div class="box">
            <div :class="['item', {'actived': tabIndex==0}]" @click="handleClick(0)">كۆرگەنلىرىم</div>
            <div :class="['item', {'actived': tabIndex==1}]" @click="handleClick(1)">ياقتۇرغانلىرىم</div>
        </div>
    </div>
</template>

<script>
    import {
        allHeight,
        scrollViewHeight
    } from '@/scripts/compatible/clientRect.js'
    export default {
        props: {
            tabIndex: {
                type: Number | String,
                require: true
            }
        },
        data() {
            return {
                clientRect: {},
            }
        },
        mounted() {
            this.clientRect_init()
        },
        methods: {
            handleClick(tabIndex) {
                this.$emit('setTabIndex', tabIndex)
            },
            clientRect_init() {
                this.clientRect = {
                    allHeight,
                }
            }
        },
    }
</script>

<style lang="scss" scoped>
    .nav-tab {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 8;
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;

        .box {
            background-color: #f0f0f0;
            border-radius: 20px;
            height: 40px;
            overflow: hidden;
            display: flex;

            .item {
                height: 40px;
                width: max-content;
                padding: 0 10px;
                color: #333;
                direction: rtl;
                display: flex;
                align-items: center;
                justify-content: center;

                &.actived {
                    background-color: #0081ff;
                    color: #fff;
                }
            }
        }
    }
</style>